/* MARK MODEL  程序的数据和业务 */
class Task {
  constructor(name, completed = false) {
    this.name = name
    this.completed = completed
  }
}

/* MARK VIEW_MODEL 视图模型负责处理任务的状态和转换逻辑 */
class TaskViewModel {
  constructor(tasks = []) {
    this.tasks = tasks
  }

  toggleTaskCompletion(index) {
    const task = this.tasks[index]
    task.completed = !task.completed
  }

  getTaskDisplayText(index) {
    const task = this.tasks[index]
    return task.completed ? `[已完成] - ${task.name}` : `[未完成] - ${task.name}`
  }
}

/* MARK VIEW 负责显示这些数据并处理用户的点击事件 */
const tasks = [
  new Task('go shopping'),
  new Task('eat dinner'),
  new Task('do homework')
]

const viewModel = new TaskViewModel(tasks)

const taskListElement = document.getElementById('task-list')

function renderTasks() {
  taskListElement.innerHTML = ''
  tasks.forEach((task, index) => {
    const listItem = document.createElement('li')
    listItem.textContent = viewModel.getTaskDisplayText(index)
    listItem.addEventListener('click', () => {
      viewModel.toggleTaskCompletion(index)
      renderTasks()
    })
    taskListElement.appendChild(listItem)
  })
}
